<template>
  <view class="link" @click="gotoPage()"><slot></slot></view>
</template>

<script>
const navType = {
  push: 'push',
  replace: 'replace',
  replaceAll: 'replaceAll',
  pushTab: 'pushTab',
  back: 'back',
}
export default {
  props: {
    to: {
      type: [String, Object],
      required: true,
    },
    stopNavto: {
      type: Boolean,
      default: false,
    },
    navType: {
      type: String,
      default: 'push',
    },
    level: {
      type: Number,
      default: 1,
    },
    append: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    formatNav(text) {
      if (text != null && text.constructor === String) {
        // eslint-disable-next-line no-useless-escape
        text = text.replace(/\'/g, '')
        text = text.replace(/(\w+)(?=:)/g, function(val) {
          return `"${val}"`
        })
        text = text.replace(/:\s*([^,{}\s"]+)/g, function(val) {
          const arr = val.split(':')
          return `:"${arr[1].trim()}"`
        })
        try {
          text = JSON.parse(text)
          // eslint-disable-next-line no-empty
        } catch (e) {}
      }
      if (this.append) {
        let pathArr = this.$Route.path.split('/')
        pathArr.splice(pathArr.length - this.level, this.level)
        pathArr = pathArr.join('/')
        if (text.constructor === Object) {
          if (text.path) {
            text.path = pathArr + text.path
          }
        } else {
          text = pathArr + text
        }
      }
      return text
    },
    gotoPage() {
      this.$emit('click')
      if (this.stopNavto) {
        return true
      }
      const type = navType[this.navType]
      if (type == null) {
        return console.error(` "navType" unknown type \n\n value：${Object.values(navType).join('、')}`)
      }
      const navInfo = this.formatNav(this.to)

      this.$Router[type](navInfo)
    },
  },
}
</script>

<style scoped>
.link {
  display: flex;
  align-items: center;
}
</style>
